<template>
  <div class="sdy-home">
    <Teleport to=".header">
      <header-com title="商品详情"></header-com>
    </Teleport>

    <div class="detail-box">
      <p>{{ goodsInfo.brand }}</p>
      <p>{{ goodsInfo.category }}</p>
      <van-text-ellipsis :content="goodsInfo.desc" expand-text="展开" collapse-text="收起" />
      <van-image width="100" height="100" :src="goodsInfo.img1" />
      <van-image width="100" height="100" :src="goodsInfo.img2" />
      <van-image width="100" height="100" :src="goodsInfo.img3" />
      <van-image width="100" height="100" :src="goodsInfo.img4" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import HeaderCom from '@/components/header.vue'
import { onMounted, ref } from 'vue'
import { getGoodsInfo } from '@/apis/goods'
import { useRoute } from 'vue-router'

interface GoodsInfo {
  [key: string]: any
}

const $route = useRoute()

// 准备一个变量, 保存商品详细信息
const goodsInfo = ref<GoodsInfo>({})

// 获取商品详情的方法
const getGoodsDetail = async () => {
  const res = await getGoodsInfo($route.query.proid as string)
  goodsInfo.value = res.data
}

onMounted(() => {
  getGoodsDetail()
})
</script>

<style lang="scss" scoped>
.detail-box {
  padding: 10px;
}
</style>
